<script setup>
import { CloseCircleOutlined } from '@ant-design/icons-vue';

defineProps(['label']);
defineEmits(['remove']);
</script>

<template>
  <span class="data-tag">
    {{ label }}
    <a-button @click="() => $emit('remove', label)">
      <template #icon><close-circle-outlined /></template>
    </a-button>
  </span>
</template>

<style>
.data-tag {
  display: inline-block;
  height: 32px;
  padding-left: .5em;
  padding-right: .5em;
  border: 1px solid rgb(228,228,228);
  line-height: 28px;
  background: #fff;
  border-radius: 4px;
  user-select: none;
}

.data-tag .ant-btn {
  height: 100%;
  padding: 0;
  border: 0;
}

.data-tag .ant-btn:hover { color: rgb(200,0,0) }
</style>
